<script>
import { onMounted, reactive, toRefs } from "vue";
import { getbs, getTabs, getContent, getPicture } from "../assets/api/home.js";
import { useRouter } from "vue-router";

export default {
  setup() {
    let router = useRouter();

    const list = reactive({
      editId: 1, // 修改主题
      bean: 0, // 鲨豆
      matchlist: [], // 比赛数据
      tabs: [], // tab数组
      livelists: [], // 直播数组
      livelist: [],
      banner: [], // 轮播图
      // 分类数组
      footballlist: [],
      basketball: [],
      esports: [],
      tennis: [],
      baseball: [],
      entertainment: [],
      others: [],
      // 下拉加载
      loading: false,
      finished: false,
      index: 8,
      i: 1,

      //关注
      follow_data: [],
    });
    // 跳转直播间
    const gotoLive = (item, id) => {
      window.localStorage.setItem("article_live", JSON.stringify(item));
      // console.log(item);
      router.push({
        path: "/detailslive",
        query: {
          id,
        },
      });
    };
    // 过滤器
    function filters(id) {
      let w = id > 10000 ? (id / 10000).toFixed(1) + "万" : id;
      return w;
    }

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 2; i++) {
          list.index += 2;
          list.livelist = list.livelists.slice(0, list.index);
        }
        // 加载状态结束
        list.loading = false;
        // 数据全部加载完成
        if (list.livelist.length >= 50) {
          list.finished = true;
        }
      }, 2000);
    };
    // 比赛详情跳转
    const goMatch = (item) => {
      router.push({
        path: "/detailsmatch",
        query: {
          id: item.matchId,
        },
      });
    };

    onMounted(() => {
      // 鲨豆获取
      if (window.localStorage.getItem("bean")) {
        list.bean = Number(window.localStorage.getItem("bean"));
      } else {
        window.localStorage.setItem("bean", 0);
      }
      // 获取主题切换id
      if (window.localStorage.getItem("editId")) {
        list.editId = window.localStorage.getItem("editId");
      } else {
        window.localStorage.setItem("editId", 1);
      }
      //赛事轮播
      getbs().then((data) => {
        list.matchlist = data.data;
        // console.log(list.matchlist);
      });
      //tabs选项卡内容
      getTabs().then((data) => {
        // console.log("tabs选项卡内容",data);
        list.tabs = data.data;
        // console.log(list.tabs);
      });
      //直播内容
      getContent().then((data) => {
        // console.log("搜索总内容", data);
        list.livelists = data.data.dataList;
        if (!window.localStorage.regard) {
          // console.log(window.localStorage.regard);
          window.localStorage.setItem("regard", JSON.stringify([]));
        }
        // 存储搜索数据
        if (!window.localStorage.setItem.sum_data) {
          window.localStorage.setItem(
            "sum_data",
            JSON.stringify(data.data.dataList)
          );
        } else {
          window.localStorage.sum_data = JSON.stringify(data.data.dataList);
        }
        // console.log(window.localStorage.sum_data);
        list.livelist = data.data.dataList.slice(0, 6);
        // console.log(list.livelist);
        list.footballlist = data.data.dataList.filter((item) => {
          return item.sportName == "足球";
        });
        list.basketball = data.data.dataList.filter((item) => {
          return item.sportName == "篮球";
        });
        list.esports = data.data.dataList.filter((item) => {
          return item.sportName == "电竞";
        });
        list.tennis = data.data.dataList.filter((item) => {
          return item.sportName == "网球";
        });
        list.baseball = data.data.dataList.filter((item) => {
          return item.sportName == "棒球";
        });
        list.entertainment = data.data.dataList.filter((item) => {
          return item.sportName == "娱乐";
        });
        list.others = data.data.dataList.filter((item) => {
          return item.sportName == "其它";
        });
      });
      //轮播图
      getPicture().then((data) => {
        // console.log("轮播图",data);
        list.banner = data.data;
        // console.log(list.banner);
      });
    });
    return {
      ...toRefs(list),
      onLoad,
      filters,
      gotoLive,
      goMatch,
    };
  },
};
</script>
<template>
  <div class="container">
    <div class="home">
      <van-sticky>
        <top-coms v-if="editId == 2"></top-coms>
        <top-com v-if="editId == 1"></top-com>

        <div class="tabs" v-if="editId == 1">
          <ul>
            <li
              v-for="item in tabs"
              :key="item.id"
              @click="i = item.id"
              :class="{ con: i == item.id }"
            >
              {{ item.sportsName }}
            </li>
          </ul>
        </div>
        <div class="tabse" v-if="editId == 2">
          <ul>
            <li
              v-for="item in tabs"
              :key="item.id"
              @click="i = item.id"
              :class="{ con: i == item.id }"
            >
              {{ item.sportsName }}
            </li>
          </ul>
        </div>
      </van-sticky>

      <!-- tab1 all-->
      <div :class="['all', { all_bottom: editId == 2 }]" v-show="i == 1">
        <div :class="['banner', { backg: editId == 1 }]">
          <div class="bg" v-if="editId == 1">
            <img src="../assets/img/lbtbg.png" alt="" />
          </div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banner" :key="index">
              <img :src="item.picPath" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <div :class="['bannerlist', { bannerCom: editId == 2 }]">
          <van-swipe :loop="false" :width="160" :show-indicators="false">
            <van-swipe-item
              v-for="item in matchlist"
              :key="item.matchId"
              @click="goMatch(item)"
            >
              <div :class="[{ items: editId == 1 }, { itemes: editId == 2 }]">
                <div class="top">
                  <div class="title" :style="{ color: item.tournamentColor }">
                    {{ item.tournamentName }}
                  </div>
                  <div class="time">{{ item.date.slice(11, 16) }}</div>
                </div>
                <div class="content">
                  <div class="left">
                    <div class="item">
                      <div class="img">
                        <img :src="item.homeTeamIcon" alt="" />
                      </div>
                      <div class="name">{{ item.homeTeamName }}</div>
                    </div>
                    <div class="item">
                      <div class="img">
                        <img :src="item.awayTeamIcon" alt="" />
                      </div>
                      <div class="name">{{ item.awayTeamName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>

        <div class="hot">
          <h3>正在热播</h3>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul class="hotlist">
              <li
                v-for="(item, index) in livelist"
                :key="item.matchId"
                @click="gotoLive(item, index)"
              >
                <div class="img">
                  <img :src="item.matchCutImg" alt="" />
                  <div :class="['living', { livings: editId == 2 }]">
                    <img src="../assets/img/live.gif" alt="" /><span
                      >直播中</span
                    >
                  </div>
                  <div class="text">
                    <div class="left one-txt-cut">{{ item.anchorName }}</div>
                    <div class="right">
                      <i class="iconfont icon-huo"></i
                      ><span>{{ filters(item.hotNum) }}</span>
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="title one-txt-cut">{{ item.roomName }}</div>
                  <div :class="['label', { labels: editId == 2 }]">
                    {{ item.sportName }}
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
      </div>

      <!-- tab2 football-->
      <div class="type" v-show="i == 2">
        <ul v-show="footballlist">
          <li
            v-for="(item, index) in footballlist"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="footballlist.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 basketball-->
      <div class="type" v-show="i == 3">
        <ul v-show="basketball">
          <li
            v-for="(item, index) in basketball"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="basketball.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 esports-->
      <div class="type" v-show="i == 6">
        <ul v-show="esports">
          <li
            v-for="(item, index) in esports"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="esports.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 tennis-->
      <div class="type" v-show="i == 7">
        <ul v-show="tennis">
          <li
            v-for="(item, index) in tennis"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="tennis.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 baseball-->
      <div class="type" v-show="i == 8">
        <ul v-show="baseball">
          <li
            v-for="(item, index) in baseball"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="baseball.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 entertainment-->
      <div class="type" v-show="i == 9">
        <ul v-show="entertainment">
          <li
            v-for="(item, index) in entertainment"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="entertainment.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>

      <!-- tab3 others-->
      <div class="type" v-show="i == 4">
        <ul v-show="others">
          <li
            v-for="(item, index) in others"
            :key="item.matchId"
            @click="gotoLive(item, index)"
          >
            <div class="img">
              <img :src="item.matchCutImg" alt="" />
              <div :class="['living', { livings: editId == 2 }]">
                <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
              </div>
              <div class="text">
                <div class="left one-txt-cut">{{ item.anchorName }}</div>
                <div class="right">
                  <i class="iconfont icon-huo"></i
                  ><span>{{ filters(item.hotNum) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="title one-txt-cut">{{ item.roomName }}</div>
              <div :class="['label', { labels: editId == 2 }]">
                {{ item.sportName }}
              </div>
            </div>
          </li>
        </ul>
        <div v-if="others.length < 1">
          <van-empty
            class="custom-image"
            image="../assets/img/null2.png"
            description="暂无数据"
          />
        </div>
      </div>
      <bottom-com :tabId="(tabId = 1)" v-if="editId == 1"></bottom-com>
      <bottom-coms :tabId="(tabId = 1)" v-if="editId == 2"></bottom-coms>
    </div>
  </div>
</template>
<style lang="scss" scoped>
/* tabs导航列表 */
.home {
  .transition {
    position: fixed;
    width: 100%;
    margin-top: 44px;
    z-index: 12;
    height: 8px;
    background-color: #f9f8fd;
  }
  .tabse {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ededef;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      height: 37px;
      padding-top: 4px;
      line-height: 38px;
      position: relative;

      // margin: 0 auto;
      white-space: nowrap;
      display: flex;
      position: relative;
      margin-bottom: 6px;

      li {
        position: relative;
        color: #3f3f3f;
        font-size: 16px;
        margin: 0 18px;

        &.con {
          //  font-size: 20px;
          font-weight: 700;
          &::before {
            content: "";
            position: absolute;
            top: auto;
            left: 18%;
            bottom: -6px;
            right: auto;
            height: 3px;
            width: 60%;
            background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            border-radius: 2px;
          }
        }
      }
    }
  }
  .tabs {
    // position: fixed;
    // width: 100%;
    // z-index: 10;
    // left: 0;
    // right: 0;
    // margin: 0 auto;
    // max-width: 750px;
    // min-width: none;
    background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      height: 37px;
      padding-top: 4px;
      line-height: 38px;
      position: relative;

      // margin: 0 auto;
      white-space: nowrap;
      display: flex;
      position: relative;
      margin-bottom: 6px;

      li {
        position: relative;
        color: #d679a6;
        font-size: 16px;
        margin: 0 18px;

        &.active {
          //  font-size: 20px;
          font-weight: 700;
          &::before {
            content: "";
            position: absolute;
            top: auto;
            left: 18%;
            bottom: -6px;
            right: auto;
            height: 3px;
            width: 60%;
            background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            border-radius: 2px;
          }
        }
      }
      .con {
        font-size: 16px;
        color: #f2cc00;
        font-weight: 600;
        position: relative;
      }
    }
  }

  .all {
    // margin-top: 43px;
    padding-bottom: 95px;
    .bg {
      position: absolute;
      // top: 140px;
      width: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 750px;
      min-width: none;
      > img {
        width: 100%;
        height: 45vw;
      }
    }
    .backg {
      background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
    }
    .banner {
      padding: 10px;
      width: 100%;
      > img {
        position: relative;
        width: 100%;
        // height: 39vw;
        border-radius: 5px;
      }
      .my-swipe {
        border-radius: 10px;
        .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 150px;
          text-align: center;
          background-color: #39a9ed;
          img {
            width: 100%;
            height: 138px;
          }
        }
      }
    }
    .bannerlist {
      margin-top: 15px;
      padding: 5px 10px 10px;
      .van-swipe {
        .van-swipe-item {
          height: 100px;
          border-radius: 5px;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #888888;
            margin-bottom: 6px;
            height: 28px;
          }
          .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              .item {
                display: flex;
                align-items: center;
                font-weight: 600;
                font-size: 12px;
                &:nth-child(1) {
                  margin-bottom: 4px;
                }
                // .name{
                //   // width: 84px;
                // }
                .img {
                  width: 24px;
                  height: 24px;
                  margin-right: 8px;
                  img {
                    width: 24px;
                    height: 24px;
                  }
                }
              }
            }
            .iconfont {
              font-size: 22px;
              color: #888888;
            }
          }
          .itemes {
            margin-right: 10px;
            padding: 5px 11px;
            background-color: #fff;
            height: 100px;
            border-radius: 5px;
            &::after {
              content: "";
              position: absolute;
              top: 1px;
              left: 0;
              height: 2px;
              width: 93%;
              border-radius: 2px 2px 0 0;
              background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            }
          }
          .items {
            margin-right: 10px;
            padding: 5px 11px;
            background-color: #fff;
            height: 100px;
            border-radius: 5px;
            &::after {
              content: "";
              position: absolute;
              top: 1px;
              left: 0;
              height: 2px;
              width: 93%;
              border-radius: 2px 2px 0 0;
              background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
            }
          }
        }
      }
    }
    .bannerCom {
      margin-top: 0;
    }
    .hot {
      padding: 0px 10px;
      h3 {
        font-size: 16px;
        font-weight: 600;
        font-family: 黑体;
        margin: 10px 0 10px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 49%;
          background-color: #fff;
          border-radius: 8px;
          margin-bottom: 10px;
          .img {
            position: relative;
            // width: 100%;
            img {
              width: 100%;
              height: 98px;
              border-radius: 8px 8px 0 0;
            }
            .living {
              position: absolute;
              top: 10px;
              right: 8px;
              width: 48px;
              height: 16px;
              background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
              border-radius: 8px;
              padding-right: 2px;
              vertical-align: middle;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              img {
                width: 8px;
                height: 8px;
                margin-left: 8px;
              }
              span {
                flex: 1;
                transform: scale(0.73, 0.73);
                opacity: 0.8;
                white-space: nowrap;
              }
            }
            .livings {
              background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
            }
            .text {
              position: absolute;
              display: flex;
              width: 100%;
              font-size: 12px;
              padding: 5px 10px;
              margin-top: -26px;
              color: white;
              font-weight: 700;
              background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0,
                rgba(0, 0, 0, 0.8) 100%
              );
              .left {
                flex: 1;
              }
              .right {
                .iconfont {
                  font-weight: normal;
                  margin-right: 1px;
                }
              }
            }
          }
          .bottom {
            height: 40px;
            display: flex;
            align-items: center;
            .title {
              flex: 1;
              color: #1e1e1e;
              font-size: 13px;
              transform: scale(0.85, 0.85);
            }
            .label {
              color: #fe1f73;
              font-size: 14px;
              transform: scale(0.83, 0.83);
              width: 40px;
              height: 24px;
              line-height: 24px;
              border-radius: 6px 3px 5px 6px;
              background-color: #ffd3df;
              text-align: center;
              margin-right: 8px;
            }
            .labels {
              color: #6a3aed;
              background-color: #f2ecf9;
            }
          }
        }
      }
    }
  }
  .all_bottom {
    padding-bottom: 60px;
  }
  .type {
    padding: 10px 10px 95px;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 49%;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        .img {
          position: relative;
          // width: 100%;
          img {
            width: 100%;
            height: 98px;
            border-radius: 8px 8px 0 0;
          }
          .living {
            position: absolute;
            top: 10px;
            right: 8px;
            width: 48px;
            height: 16px;

            background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
            border-radius: 8px;
            padding-right: 2px;
            vertical-align: middle;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            img {
              width: 8px;
              height: 8px;
              margin-left: 8px;
            }
            span {
              flex: 1;
              transform: scale(0.73, 0.73);
              opacity: 0.8;
              white-space: nowrap;
            }
          }
          .livings {
            background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          }
          .text {
            position: absolute;
            display: flex;
            width: 100%;
            font-size: 12px;
            padding: 5px 10px;
            margin-top: -26px;
            color: white;
            font-weight: 700;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.8) 100%
            );
            .left {
              flex: 1;
            }
            .right {
              .iconfont {
                font-weight: normal;
                margin-right: 1px;
              }
            }
          }
        }
        .bottom {
          height: 40px;
          display: flex;
          align-items: center;
          .title {
            flex: 1;
            color: #1e1e1e;
            font-size: 13px;
            transform: scale(0.85, 0.85);
          }
          .label {
            color: #fe1f73;
            font-size: 14px;
            transform: scale(0.83, 0.83);
            width: 40px;
            height: 24px;
            line-height: 24px;
            border-radius: 6px 3px 5px 6px;
            background-color: #ffd3df;
            text-align: center;
            margin-right: 8px;
          }
          .labels {
            color: #6a3aed;
            background-color: #f2ecf9;
          }
        }
      }
    }
  }
}
</style>
